<script setup lang='ts'>
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { loginAdminApi } from '../api/admin'
import { useRouter } from 'vue-router';



const router = useRouter()

const ruleFormRef = ref<FormInstance>()

const validateUser = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入管理员账户！'))
  }
  else {
    if (ruleForm.userpass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('userpass', () => null)
    }
    callback()
  }
}
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入正确的密码！'))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  username: '',
  userpass: '',
})

const rules = reactive({
  username: [{ validator: validateUser, trigger: 'blur' }],
  userpass: [{ validator: validatePass, trigger: 'blur' }],
})

// 登录
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      loginAdminApi({
        adminname: ruleForm.username,
        password: ruleForm.userpass
      }).then((res: any) => {
        if (res.code == '200') {
          ElMessage({
            message: '登陆成功',
            type: 'success',
          })
          sessionStorage.setItem('token', res.data.token)
          sessionStorage.setItem('role', res.data.role)
          sessionStorage.setItem('checkedkeys', JSON.stringify(res.data.checkedkeys))
          router.push('/admin')

        } else {
          // ruleForm.username = ''
          // ruleForm.userpass = ''
          ElMessage({
            message: res.message,
            type: 'error',
          })
        }
      })
    }
    else {
      ElMessage({
        message: '请输入账户或密码',
        type: 'error',
      })
      return false
    }
  })
}

</script>
<template>
  <div class="container">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
      <el-form-item prop="username">
        <template #prepend>
          <el-icon>
            <User />
          </el-icon>
        </template>
        <el-input v-model="ruleForm.username" type="text" autocomplete="off" placeholder="管理员账户">
          <template #prefix>
            <el-icon>
              <User />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="userpass">
        <el-input v-model="ruleForm.userpass" type="password" autocomplete="off" placeholder="密码"
          @keyup.enter="submitForm(ruleFormRef)">
          <template #prefix>
            <el-icon>
              <Lock />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)" style="width: 100%;">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(https://cas.1000phone.net/cas/images/login/bg.png) 50% no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

.el-form {
  width: 420px;
  padding: 30px 20px;
  background-color: #fff;
}
</style>
